<!-- 首页index -->
<template>
	<view class="">

		<view>
			<u-navbar :is-back="false" title=" ">
				<!-- 选择地区 -->
				<view class="ml20 mr20 f c ">
					<view class="vw25 f b c">
						<view class="flexR" @click="show=true">
							<image style="width:36rpx;height:34rpx;" src="../../static/img/006.png" mode=""></image>
							<view class="m_l_10">{{txt}}</view>
						</view>
						<u-select v-model="show" mode="mutil-column-auto" :list="citylist" @confirm="confirm">
						</u-select>
					</view>
					<view class="vw10" style="margin-left:105rpx;">
						<text>首页</text>
					</view>
				</view>
			</u-navbar>
		</view>
		<!-- 轮播图 -->
		<view class="mar" style="width:90%;">
			<u-swiper :list="list"></u-swiper>
		</view>
		<!-- 热门课程 -->
		<view class="w90 f b c p_t_20" v-if="courselist != ''" @click="hot">
			<text class="bold fs38">热门课程</text>
			<view>
				<text class="bold blue mr5">全部</text>
				<image style="width: 20rpx;height: 20rpx;" src="../../static/img/007.png" mode=""></image>
			</view>
		</view>
		<!-- 热门课程 -->
		<view class="w90 f b c p_t_20 ">
			<view class="flexR " style="width: 31%" v-for="(item,index) in courselist" :key="index">
				<view @click="toMbiaoti(item.id)" class="wd100">
					<image style="height: 204rpx;" class="br5 wd100" :src="item.img" mode="widthFix"></image>
					<view class="f d wd100">
						<text class="fs34 bold ellipsis">{{item.name}}</text>
						<text class="p_t_5 hui fs24  ellipsis">{{item.title}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 附近门店 -->
		<view class="w90 f b c p_t_20" v-if="nearbylist != ''">
			<text class="bold fs38">附近门店</text>
		</view>
		<!-- 附近门店 -->
		<view class="" v-for="(item,index) in nearbylist" :key="index">
			<view class="index-fujin pb15" @click="toMmendian(item.id)">
				<image
					style="width: 686rpx;height: 360rpx;border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;"
					:src="item.img" mode="widthFix"></image>
				<view class="w90">
					<view class="f b c">
						<view class="fs32 bold">{{item.name}}</view>
					</view>
					<view class="f b c p_t_20">
						<view>营业时间：{{item.yytime}}</view>
					</view>
					<view class="quanxian"></view>
					<view class="flexR aic">
						<view class="flexauto" @click.stop="">
							<view class="pt10"></view>
							<text class="toe" style="width:500rpx;">{{item.address}}</text>
							<text class="fs22  hui">距离{{item.juli}}</text>
						</view>
						<image @click.stop="godizhi(item)" class="flexnone"
							style="width: 44rpx;height: 44rpx; margin-top: 20rpx;" src="../../static/img/006.png"
							mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="" style="padding: 30rpx;"></view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				citylist: [],
				show: false,
				txt: '北京市', //某某地区值
				province: [],
				val2: '',
				placeholder: '请输入搜索内容',
				list: [],
				courselist: [],
				lat: '',
				lng: '',
				nearbylist: [] //附近门店
			}
		},
		onLoad(query) {
			var scene = decodeURIComponent(query.scene);
			if(scene){
				uni.setStorageSync('scene',scene);
			}
			// 动态导航条文字
			uni.setNavigationBarTitle({
				title: ''
			})
			var city = uni.getStorageSync('city');
			if (city) {
				this.txt = city
			} else {
				this.txt = '北京市';
			}
			this.init()

		},
		onShow() {
			this.getLocationInfo()
		},
		onPullDownRefresh:function(){
			this.getLocationInfo();
			setTimeout(function () {
		        uni.stopPullDownRefresh();
		    }, 1500);
		},
		methods: {
			init() {
				var that = this
				//城市列表
				that.$http.post(that.$config.UrlPostcityList, {}).then((res) => {
					if (res.status == 1) {
						that.citylist = res.data
					}
				})
				//banner
				that.$http.post(that.$config.UrlPostbannerList, {}).then((res) => {
					if (res.status == 1) {
						that.list = res.data
					}
				})

				//热门课程
				var json = {
					city: that.txt
				}
				that.$http.post(that.$config.UrlPostcourseHotList, json).then((res) => {
					if (res.status == 1) {
						that.courselist = res.data
					}
				})
			},
			//附近门店
			getLocationInfo(){
				var that = this
				//附近门店
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						console.log(res)
						that.lat = res.latitude
						that.lng = res.longitude
						var js = {
							city: that.txt,
							lat: res.latitude,
							lng: res.longitude
						}
						that.$http.post(that.$config.UrlPoststoreList, js).then((res) => {
							if (res.status == 1) {
								that.nearbylist = res.data
							}
						})
					},
					fail: function(e){
						that.$api.alert("请开启手机定位服务,才能查看附近门店")
					}
				});
			},
			//打开地图
			godizhi(e) {
				console.log(e.lat)
				uni.openLocation({
					address: e.address,
					latitude: parseFloat(e.lat),
					longitude: parseFloat(e.lng),
					success: function(e) {

					}
				});
			},
			selecteProvince(value) {
				this.province = value;
			},
			// 切换省份
			confirm(e) {
				this.txt = e[1].label
				uni.setStorageSync('city', this.txt);
				this.init()
				uni.$emit("QJjianting","OK")
			},
			search(e, val) {
				console.log(e, val);
				this['val' + val] = e;
			},
			// 进入单个热门课程
			toMbiaoti(e) {
				uni.navigateTo({
					url: 'Details/Details?id=' + e
				})
			},
			//课程全部
			hot() {
				uni.switchTab({
					url: "../courses/courses"
				})
			},
			// 门店详情
			toMmendian(id) {

				uni.navigateTo({
					url: 'information/information?id=' + id + "&lat=" + this.lat + "&lng=" + this.lng
				})
			},
			//附近门店全部
			toMxinxi() {
				uni.navigateTo({
					url: './Store/Store'
				})
			}
		}
	}
</script>

<style scoped>
	page {
		background-color: #FFFFFF;
	}

	.index-fujin {
		width: 686rpx;
		opacity: 1;
		background: #ffffff;
		border-radius: 20rpx;
		box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(0, 0, 0, 0.16);
		margin: 0 auto;
		margin-top: 30rpx;
	}
</style>
